import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'
import RouterView from '../../router/routerView'
import {RouterData} from '../../router/router.d'
import HomeCss from './home.module.scss'
import axios from 'axios'
import 'swiper/swiper-bundle.css'
import Swiper, { Pagination } from 'swiper';
import {Banner,AnimalInterface} from '../../types/home.d'
import Animal from '../../component/animal/animal'
import {connect} from 'react-redux'
Swiper.use([Pagination]);

interface Iprops{
    routes:RouterData[],
    history:any,
    list:AnimalInterface[],
    initList:(list:AnimalInterface[]) => void
}

interface Istate{
    banner:Banner[],
    chooseId:number  
}

let types = ["全部","狗狗",'猫猫','其他']; //0:全部  1：狗狗  2：猫猫  3：其他

class Home extends Component<Iprops,Istate>{
    state = {
        banner:[],
        chooseId:0  //默认全部
    }
    componentDidMount(){
        // 请求banner
        axios.get('/api/banner').then(res => {
            console.log(res.data.data)
            if(res.data.code === 10000){
                this.setState({
                    banner:res.data.data
                },() => {
                    new Swiper('.swiper-container',{
                        pagination: {
                            el: '.swiper-pagination',
                            type: 'bullets'
                            },
                    })
                })
            }
        })
        // 请求列表数据
        //如果仓库有数据，直接用仓库的，没有再去请求
        if(!this.props.list.length){
            axios.get('/api/list').then(res => {
                if(res.data.code === 10000){
                    // this.setState({
                    //     list:res.data.data
                    // })
                    this.props.initList(res.data.data)
                }
            })
        }
    }
    render() {
        console.log(this.props.list);
        let {banner,chooseId} = this.state;
        let {list} = this.props;
        //过滤种类
        let result = chooseId === 0 ? list : list.filter(item => item.pet_breed === chooseId);
        return (
            <div className={HomeCss.wrap}>
                {/* <NavLink to="/home/one">one</NavLink>
                <NavLink to="/home/two">two</NavLink>
                <div>
                    <RouterView routes={this.props.routes}></RouterView>
                </div> */}

                <div className={HomeCss.con}>
                     {/* banner */}
                    <div className="swiper-container">
                        <div className="swiper-wrapper">
                            {banner && banner.map((item:Banner) => <div key={item.id} className="swiper-slide">
                                {item.id}
                                <img src={item.image} title={item.name} alt="" className={HomeCss.img}/>
                            </div>)}
                        </div>
                        <div className="swiper-pagination"></div>
                    </div>
                    <div className={HomeCss.speed}>
                        {types.map((item,index) => <span className={chooseId === index?HomeCss.active:''} key={item} onClick={() => {
                            this.setState({
                                chooseId:index
                            })
                        }}>{item}</span>)}
                    </div>
                    {/* 列表 */}
                    <div className={HomeCss.list}>
                        {result && result.map((item:AnimalInterface) => <Animal key={item.id} item={item}></Animal>)}
                    </div>
                </div>
                <footer className={HomeCss.foot}>
                    <NavLink to="/home">首页</NavLink>
                    <NavLink to="/public">发布</NavLink>
                    <a>消息</a>
                    <a>我的</a>
                </footer>
            </div>
        )
    }
}

let stateMapToProps = (state:any) => {
    return  {
        list:state.list
    }
}

let dispatchMapToProps = (dispatch:any) =>{
    return {
        initList(list:AnimalInterface[]){
            dispatch({type:'INIE_LIST',list})
        }
    }
}

export default connect(stateMapToProps,dispatchMapToProps)(Home)